
<template>
    <el-form :model="selectionForm" label="选择供应商">
        <el-transfer style="text-align: left; display: inline-block" v-model="selectionForm.tableVendorData" filterable :render-content="renderFunc"
            :titles="['可供应商', '已选供应商']" :button-texts="['到左边', '到右边']" :data="vendorData">
        </el-transfer>
    </el-form>
</template>
<script>
  import qs from 'qs';
  export default {
    data() {
      return {
        vendorData: [],
        selectionForm: {
          tableVendorData: [],
        }
      };
    },
    mounted() {
      //物料品类
      this.sourceMethod(this.lib.config.host.system + "/system/orgmgt/organization/queryForNpcDatalist", {vendorCodeOrVendorName:'', page:1, rows:15}, this.vendorData);
    },
    watch:{
        //监听右边数据，发生变化，触发父组件change-data方法
        'selectionForm.tableVendorData':function (val) {
          this.$emit('changeVendorData', val);
        }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      renderFunc(h, option) {
        return <span>{option.label}</span>;
      },
      // 可选url : 数据源地址 sourceData ：数据源存放的位置
      sourceMethod(url, parameter, sourceData) {
        var par = {};
        if (parameter != "") {
          par = parameter
        }
        this.axios.post(url, qs.stringify(par)).then((response) => {
            var responseDate = response.data;
            if(responseDate.hasOwnProperty('rows')){
                responseDate = responseDate.rows
            }
            for (var i = 0; i < responseDate.length; i++) {
              let vedordata = responseDate[i];
                // 物料品类数据
                sourceData.push({
                    key: vedordata.vendorCode + ',' + vedordata.vendorName,
                    label: '【' + responseDate[i].vendorCode + '】' + responseDate[i].vendorName
                });
            }
        })
        .catch(function (error) {
            console.log(error);
        });
        parameter = {};
      }
    }
  }
</script>

